<template>
  <a-card :bordered='false'>
    <!-- 查询区域 -->
    <div class='table-page-search-wrapper'>

      <div class="table-operator">
        <a-button type='primary'   v-has="'user:exportXls'"  icon='download' @click="handleExportXls('用户表')" style='margin-left: 8px'>导出</a-button>
      </div>

      <a-form layout='inline' @keyup.enter.native='searchQuery'>
        <a-row :gutter='24'>
          <template>
            <a-col :xl='3' :lg='4' :md='4' :sm='12'>
              <a-form-item label='用户编号'>
                <a-input placeholder='请输入用户编号' v-model='queryParam.id' @pressEnter='searchQuery'></a-input>
              </a-form-item>
            </a-col>
            <a-col :xl='3' :lg='7' :md='8' :sm='24'>
              <a-form-item label='广告商编号'>
                <a-input placeholder='请输入广告商编号' v-model='queryParam.advertiserId' @pressEnter='searchQuery'></a-input>
              </a-form-item>
            </a-col>
            <a-col :xl='4' :lg='7' :md='8' :sm='24'>
              <a-form-item label='昵称'>
                <a-input placeholder='请输入昵称' v-model='queryParam.nickName' @pressEnter='searchQuery'></a-input>
              </a-form-item>
            </a-col>
            <a-col :xl='4' :lg='7' :md='8' :sm='24'>
              <a-form-item label='手机号'>
                <a-input placeholder='请输入手机号' v-model='queryParam.phone' @pressEnter='searchQuery'></a-input>
              </a-form-item>
            </a-col>
            <a-col :xl='3' :lg='7' :md='8' :sm='24'>
              <!-- （1启用，0不启用）2不允许下单 -->
              <a-form-item label='状态'>
                <a-select
                  v-model='queryParam.status'
                  style='width: 120px'
                  :options='options'
                  allowClear
                  placeholder='请选择'
                  @change='searchQuery'
                />
              </a-form-item>
            </a-col>
          </template>
          <a-col :xl='6' :lg='7' :md='6' :sm='24'>
            <span style='float: left; overflow: hidden' class='table-page-search-submitButtons'>
              <a-button type='primary' @click='searchQuery' icon='search'>查询</a-button>
              <a-button type='primary' @click='searchReset' icon='reload' style='margin-left: 8px'>重置</a-button>

<!--              <a-upload-->
<!--                name='file'-->
<!--                :showUploadList='false'-->
<!--                :multiple='false'-->
<!--                :headers='tokenHeader'-->
<!--                :action='importExcelUrl'-->
<!--                @change='handleImportExcel'-->
<!--              >-->
<!--                <a-button type='primary' icon='import' style='margin-left: 8px'>导入</a-button>-->
<!--              </a-upload>-->
              <!-- <a @click="handleToggleSearch" style="margin-left: 8px">
                {{ toggleSearchStatus ? '收起' : '展开' }}
                <a-icon :type="toggleSearchStatus ? 'up' : 'down'"/>
              </a> -->
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>

    <!-- 操作按钮区域 -->
    <div class='table-operator'>
      <!-- <a-button @click="handleAdd" type="primary" icon="plus">新增</a-button> -->

      <a-dropdown v-if='selectedRowKeys.length > 0'>
        <a-menu slot='overlay'>
          <a-menu-item key='1' @click='batchDel'>
            <a-icon type='delete' />
            删除
          </a-menu-item>
        </a-menu>
        <a-button style='margin-left: 8px'> 批量操作
          <a-icon type='down' />
        </a-button>
      </a-dropdown>
    </div>
    <div class='ant-alert ant-alert-info' style='margin-bottom: 15px'>
      <span style='margin-right: 20px'
      >总共剩余余额：<span style='font-size: 16px; color: red'>{{ parseFloat(totalBalance || 0).toFixed(2) }} </span
      >元</span
      >
      <span style='margin-right: 20px'
      >剩余会员卡：<span style='font-size: 16px; color: red'>{{ totalActivityBalance }} </span>元</span
      >
      <span style='margin-right: 20px'
      >剩余充值余额：<span style='font-size: 16px; color: red'>{{ totalTopBalance }} </span>元</span
      >
      <span style='margin-right: 20px'
      >总共用户：<span style='font-size: 16px; color: red'>{{ totalUser }} </span>人</span
      >

      <span style='margin-right: 20px'
      >昨日新增用户：<span style='font-size: 16px; color: red'>{{ dayUserNew }} </span>人</span
      >
    </div>
    <!-- table区域-begin -->
    <!-- <div>
      <div class="ant-alert ant-alert-info" style="margin-bottom: 16px">
        <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择
        <a style="font-weight: 600">{{ selectedRowKeys.length }}</a
        >项
        <a style="margin-left: 24px" @click="onClearSelected">清空</a>
      </div> -->
    <!-- :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }" -->
    <a-table
      ref='table'
      size='middle'
      bordered
      rowKey='id'
      :columns='columns'
      :dataSource='dataSource'
      :pagination='ipagination'
      :loading='loading'
      class='j-table-force-nowrap'
      @change='handleTableChange'
    >
      <!-- 封面 图 -->
<!--      <template slot='avatarUrl' slot-scope='text, record'>-->
<!--        <div class='anty-img-wrap'>-->
<!--          <a-avatar shape='square' :src='getAvatarView(record.avatarUrl)' />-->
<!--        </div>-->
<!--      </template>-->
      <template slot="avatarUrl" slot-scope="text, record" >
        <div class="anty-img-wrap" style="height: 70px; width: 70px">
          <j-image-upload v-if="record.avatarUrl" text="上传" disabled v-model="record.avatarUrl"></j-image-upload>
        </div>
      </template>



      <template slot='status' slot-scope='text, record'>
        <a-switch default-checked :checked='record.status' @change='statusChange(record)' />
      </template>
      <template slot="remark" slot-scope="text, record">
        <a-input style="width: 100px;"
                 size="small"
                 v-model="record.remark"
                 @blur="remarkChange(record)"
        />
      </template>
      <span slot='action' slot-scope='text, record'>
         <a v-has="'XhdjUserInfo:ipone'" @click="setIphone(record)">修改手机号</a>
        <a-divider type="vertical" v-has="'XhdjUserInfo:ipone'" />
        <a v-has="'XhdjUserInfo:money'" @click='handleEdit(record)'>充值</a>
        <a-divider type='vertical' />
        <a @click='handleDetails(record)'>账单</a>
         <a-divider type='vertical' />
<!--        <a  v-if='record.isWrite===1' @click='recoverAccount(record)'>注销恢复</a>-->
        <a-popconfirm  v-has="'XhdjUserInfo:recoverAccount'" v-if='record.isWrite===1' title="账号已注销,确定恢复使用吗?" @confirm="() => recoverAccount(record)">
          <a>注销恢复</a>
        </a-popconfirm>



        <!-- <a-dropdown>
            <a class="ant-dropdown-link">更多 <a-icon type="down" /></a>
            <a-menu slot="overlay">
              <a-menu-item>
                <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
                  <a>删除</a>
                </a-popconfirm>
              </a-menu-item>
            </a-menu>
          </a-dropdown> -->
      </span>
    </a-table>
    <!-- table区域-end -->

    <!-- 表单区域 -->
    <xhdjUserInfo-modal ref='modalForm' @ok='modalFormOk'></xhdjUserInfo-modal>
    <XhdjUserInfoDeatil ref='detailForm' @ok='modalFormOk'></XhdjUserInfoDeatil>
    <XhdjUserInfoIphone ref="iphone" @ok="modalFormOk"></XhdjUserInfoIphone>

  </a-card>
</template>

<script>
import '@/assets/less/TableExpand.less'
import { httpAction, getFileAccessHttpUrl } from '@/api/manage'
import XhdjUserInfoModal from './modules/XhdjUserInfoModal'
import XhdjUserInfoDeatil from './modules/XhdjUserInfoDeatil'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import XhdjUserInfoIphone from './modules/XhdjUserInfoIphone.vue'
import { getAction } from '@/api/manage'

export default {
  name: 'XhdjUserInfoList',
  mixins: [JeecgListMixin],
  components: {
    XhdjUserInfoModal,
    XhdjUserInfoDeatil,
    XhdjUserInfoIphone
  },
  data() {
    return {
      description: '用户表管理页面',
      options: [
        { label: '启用', value: '1' },
        { label: '禁用', value: '0' },
        { label: '禁止下单', value: '2' }
      ],
      dayUserNew: 0,
      totalBalance: 0,
      totalUser: 0,
      totalActivityBalance: 0,
      totalTopBalance:0,
      typeW: 2,
      // 表头
      columns: [
        {
          title: '用户编号',
          dataIndex: 'id',
          width: 60,
          height: 120,
          align: 'center'
        },
        {
          title: '头像',
          align: 'center',
          dataIndex: 'avatarUrl',
          scopedSlots: { customRender: 'avatarUrl' }
        },
        {
          title: '昵称',
          align: 'center',
          dataIndex: 'nickName'
        },

        {
          title: '手机号',
          align: 'center',
          dataIndex: 'phone'
        },
        {
          title: '支付笔数 ',
          align: 'center',
          dataIndex: 'xdCount'
        },
        {
          title: '退款笔数 ',
          align: 'center',
          dataIndex: 'tkCount'
        },
        {
          title: '消费金额',
          align: 'center',
          dataIndex: 'xdTotalAmount',
          sorter: (a, b) => a.xdTotalAmount - b.xdTotalAmount

        },
        {
          title: '充值金额 ',
          align: 'center',
          dataIndex: 'topAmount'
        },
        {
          title: '余额',
          align: 'center',
          dataIndex: 'balance',
          sorter: (a, b) => a.balance - b.balance
        },
        {
          title: '会员卡余额',
          align: 'center',
          dataIndex: 'activityBalance'
          // sorter: (a, b) => a.activityBalance - b.activityBalance
        },
        {
          title: '佣金余额',
          align: 'center',
          dataIndex: 'commissionBalance'
        },
        // {
        //   // (0-默认未知,1-男,2-女)
        //   title: '性别',
        //   align: 'center',
        //   dataIndex: 'sex',
        //   customRender: (text, record) => {
        //     return record.sex == 1 ? '男' : record.sex == 2 ? '女' : '未知'
        //   }
        // },
        {
          // （1启用，0不启用）2不允许下单
          title: '启用状态',
          align: 'center',
          dataIndex: 'status',
          scopedSlots: { customRender: 'status' }
        },
        {
          title: '备注',
          align: 'center',
          dataIndex: 'remark',
          scopedSlots: { customRender: 'remark' }
        },
        {
          title: '注册时间',
          align: 'center',
          dataIndex: 'createTime'
        },
        {
          title: '广告商编号',
          align: 'center',
          dataIndex: 'advertiserId'
        },
        {
          title: '推广员用户编号',
          align: 'center',
          dataIndex: 'userParentId'
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
          scopedSlots: { customRender: 'action' }
        }
      ],
      isorter: {
        column: 'create_time',
        order: 'desc'
      },
      url: {
        list: '/xhdjUserInfo/list',
        delete: '/xhdjUserInfo/delete',
        deleteBatch: '/xhdjUserInfo/deleteBatch',
        exportXlsUrl: 'xhdjUserInfo/exportXls',
        importExcelUrl: 'xhdjUserInfo/importExcel',
        examine: '/xhdjUserInfo/editStatus',
        statistics: '/xhdjUserInfo/statistics',
        edit: '/xhdjUserInfo/edit',
      }
    }
  },
  computed: {
    importExcelUrl: function() {
      return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`
    }
  },
  created() {
    this.init()
  },
  methods: {
    getAvatarView: function(avatar) {
      return getFileAccessHttpUrl(avatar)
    },
    handleDetails(record) {
      this.$refs.detailForm.edit(record)
      this.$refs.detailForm.title = '消费记录'
      this.$refs.detailForm.disableSubmit = true
    },
    setIphone (record) {
      this.$refs.iphone.edit(record)
      this.$refs.iphone.disableSubmit = true
    },
    init() {
      var params = this.getQueryParams()
      getAction(this.url.statistics, params).then(res => {
        if (res.success) {
          let { dayUserNew, totalBalance, totalUser,totalActivityBalance,totalTopBalance} = res.result
          this.dayUserNew = dayUserNew
          this.totalUser = totalUser
          this.totalBalance = totalBalance
          this.totalActivityBalance= totalActivityBalance
            this.totalTopBalance=totalTopBalance
        }
      })
    },
    // 改变状态
    statusChange(record) {
      let a = {
        id: record.id,
        status: record.status ? 0 : 1
      }
      httpAction(this.url.examine, a, 'post').then(res => {
        if (res.success) {
          this.loadData()
        } else {
          that.$message.warning(res.message)
        }
      })
    },
    //改变备注
    remarkChange(record) {
      let remarkBo = {
        id: record.id,
        remark: record.remark
      }
      httpAction(this.url.edit, remarkBo, 'post').then(res => {
        if (res.success) {
          this.loadData()
        } else {
          that.$message.warning(res.message)
        }
      })
    },
    recoverAccount(record){
      let remarkBo = {
        id: record.id,
        isWrite: 0
      }
      httpAction(this.url.edit, remarkBo, 'post').then(res => {
        if (res.success) {
          this.loadData()
        } else {
          that.$message.warning(res.message)
        }
      })
    }

  }
}
</script>
<style scoped>
@import '~@assets/less/common.less';

.ant-col {
  display: flex;
  justify-content: right;
}

.ant-row {
  display: flex;
  justify-content: right;
}

.anty-img-wrap /deep/ .ant-upload-picture-card-wrapper {
  display: block !important;
}
</style>
